<template>
    <page class="movie">
        <page-header>猫眼电影</page-header>
        <ul class="topNav">
            <li :class="[pageType==0?'active':null]" @click="pageType=0">正在热映</li>
            <li :class="[pageType==1?'active':null]" @click="pageType=1">即将上映</li>
        </ul>
        <div class="bottomBar">
            <div class="bottomBar-switch" :class="{active:pageType==1}"></div>
        </div>
        <swiper ref="mySwiper" class="movieSwiper" :options="swiperOption">
            <swiper-slide class="swiperSlide">
                <b-scroll>
                    <movie-item v-for="(item,index) in movieList" :key="index" :mitem="item"></movie-item>
                </b-scroll>
            </swiper-slide>
            <swiper-slide class="swiperSlide" style="background-color:blue">第二项</swiper-slide>
        </swiper>
    </page>
</template>

<script>
import movieItem from "../components/movieItem"
import BScroll from "../components/BScroll";
    export default {
        name: "movie",
        data() {
            return {
                //0代表正在热映
                //1代表即将上映
                pageType: 0,
                movieList:[]
            }
        },
        created(){
            this.showLoading("正在加载中");
            this.$http.get("/maoyanApi/ajax/movieOnInfoList").then(res=>{
                let movieList=res.data.movieList;
                this.movieList=movieList;
                this.hideLoading();
            }).catch(err=>{
                console.log(err);
                this.hideLoading();
            });
        },
        watch: {
            pageType(newValue) {
                //newValue代表的是就pageType新的值
                this.mySwiper.slideTo(newValue);
            }
        },
        computed: {
            //swiper的配置项
            //https://www.swiper.com.cn/api/index.html
            swiperOption() {
                var that = this; //这个this指向的是vue
                return {
                    initialSlide: 0,
                    //监控事件
                    on: {
                        slideChange() {
                            that.pageType = this.activeIndex;
                        }
                    }
                }
            },
            mySwiper() {
                //返回了页面上面的swiper DOM元素
                return this.$refs.mySwiper.swiper;
            }
        },
        methods: {
            freshData(scroll) {
                console.log("我在外部监听你的下拉刷新方法 ");
                setTimeout(() => {
                    scroll.finishPullDown();
                    scroll.refresh();
                }, 5000);

            }
        },
        components:{
            movieItem,BScroll
        },
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";
    .movie{
        display: flex;
        flex-direction: column;
    }
    .topNav {
        @include flexbox();
        height: .8rem;

        >li {
            flex: 1;
            height: inherit;
            @include flexbox();
            justify-content: center;
            align-items: center;

            &.active {
                color: $primaryColor;
            }
        }
    }

    .bottomBar {
        width: 100%;
        height: 2px;
        background-color: lightgray;

        .bottomBar-switch {
            width: 50%;
            background-color: $primaryColor;
            height: inherit;
            transition: all 0.2s linear;

            &.active {
                transform: translateX(100%);
            }

        }
    }

    .movieSwiper {
        flex: 1;
        width: 100%;
        overflow: auto;
    }
    .swiperSlide{
        height:100%;
        overflow: auto;
    }
</style>